<script>

import BlogCommentList from '@/views/admin/blog/BlogCommentList.vue'
import BlogPreview from '@/views/admin/blog/BlogPreview.vue'

export default {
  name: 'BlogList',
  components: { BlogPreview, BlogCommentList },
  data () {
    return {
      pageInfo: {
        page: 1,
        limit: 5,
        total: 0
      },
      searchInfo: {
        applyTimeRange: '',
        blogStatus: '',
        status: '',
        categoryId: '',
        createUser: '',
        hasComment: '',
        title: ''
      },
      tableList: [],
      delIds: [],
      userinfoList: [],
      categoryList: [],
      tagList: [],
      showTag: false,
      type: '',
      applyTime: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  methods: {
    getTableList () {
      this.searchInfo.applyTimeRange = this.applyTime.toString()
      this.$axios.get('blog/page', {
        params: {
          ...this.pageInfo,
          ...this.searchInfo,
          type: this.type
        }
      }).then(data => {
        this.tableList = [...data.list]
        this.pageInfo.total = data.total
      }).catch(e => e)
    },
    currentChange (val) {
      this.pageInfo.page = val
      this.getTableList()
    },
    sizeChange (val) {
      this.pageInfo.page = 1
      this.pageInfo.limit = val
      this.getTableList()
    },
    search () {
      this.pageInfo.page = 1
      this.getTableList()
    },
    clear () {
      this.pageInfo = { ...this.$options.data().pageInfo }
      this.searchInfo = { ...this.$options.data().searchInfo }
      this.applyTime = []
      this.getTableList()
    },
    selectionChange (selection) {
      this.delIds = selection.map(item => item.blogId)
    },
    del (id) {
      let ids = []
      if (id) {
        ids = [id]
      } else {
        if (this.delIds.length === 0) {
          this.$message.error('请至少选中一条数据进行删除！')
          return false
        } else {
          ids = [...this.delIds]
        }
      }
      this.$confirm(`确定删除数据[${ids}]的数据吗?`, '询问').then(() => {
        this.$axios.delete('blog/delete', {
          params: { ids: ids.toString() }
        }).then(data => {
          if (data) {
            this.$message.warning(data)
          } else {
            this.$message.success('删除成功')
          }
          this.getTableList()
        }).catch(e => e)
      }).catch(() => {})
    },
    edit (id) {
      this.$router.push(`/home/apply?blogId=${id}`)
    },
    preview (id) {
      this.$refs.blogPreview.init(id)
    },
    getUserinfoList () {
      if (this.type === 1) {
        this.$axios.get('userinfo/select').then(data => {
          this.userinfoList = [...data]
        }).catch(e => e)
      } else {
        this.userinfoList = []
      }
    },
    getCategoryList () {
      this.$axios.get('category/select/' + this.type).then(data => {
        this.categoryList = [...data]
      }).catch(e => e)
    },
    init () {
      this.pageInfo = { ...this.$options.data().pageInfo }
      this.searchInfo = { ...this.$options.data().searchInfo }
      this.type = this.$route.meta.type
      this.getTableList()
      this.getUserinfoList()
      this.getCategoryList()
    },
    tag (tagList) {
      this.showTag = true
      this.tagList = [...tagList]
    },
    comment (blogId) {
      this.$refs.blogCommentListRef.init(blogId)
    }
  },
  watch: {
    $route () {
      this.init()
    }
  },
  created () {
    this.init()
  }
}
</script>

<template>
  <div>
    <el-card>
      <el-form :model="searchInfo" label-width="80px" inline>
        <el-form-item label="标题">
          <el-input v-model="searchInfo.title" clearable placeholder="标题"/>
        </el-form-item>
        <el-form-item label="发布时间">
          <el-date-picker v-model="applyTime" start-placeholder="开始时间" end-placeholder="结束时间" type="datetimerange" range-separator="-" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptions"/>
        </el-form-item>
        <el-form-item v-if="type === 1" label="创建人">
          <el-select v-model="searchInfo.createUser" clearable placeholder="创建人">
            <el-option v-for="item in userinfoList" :key="item.userinfoId" :value="item.userinfoId" :label="item.username"/>
          </el-select>
        </el-form-item>
        <el-form-item label="分类">
          <el-select v-model="searchInfo.categoryId" clearable placeholder="分类">
            <el-option v-for="item in categoryList" :key="item.categoryId" :value="item.categoryId" :label="item.name"/>
          </el-select>
        </el-form-item>
        <el-form-item label="评论">
          <el-select v-model="searchInfo.hasComment" clearable placeholder="评论">
            <el-option :value="1" label="开启"/>
            <el-option :value="2" label="关闭"/>
          </el-select>
        </el-form-item>
        <el-form-item label="博客状态">
          <el-select v-model="searchInfo.blogStatus" clearable placeholder="博客状态">
            <el-option :value="1" label="发布"/>
            <el-option :value="2" label="草稿"/>
          </el-select>
        </el-form-item>
        <el-form-item label="数据状态">
          <el-select v-model="searchInfo.status" clearable placeholder="账号状态">
            <el-option :value="1" label="可用"/>
            <el-option :value="2" label="禁用"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="search">查询</el-button>
          <el-button @click="clear">清空</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <el-button @click="del()">删除</el-button>
      <el-table :data="tableList" border @selection-change="selectionChange">
        <el-table-column type="selection" fixed="left"/>
        <el-table-column prop="blogId" label="编号"/>
        <el-table-column prop="title" label="标题" show-overflow-tooltip/>
        <el-table-column prop="category.name" label="分类"/>
        <el-table-column v-if="type === 1" prop="author.username" label="创建人"/>
        <el-table-column prop="applyTime" label="发布时间"/>
        <el-table-column prop="blogStatus" label="博客状态">
          <template slot-scope="{row}">
            <el-tag v-if="row.blogStatus === 1" type="primary">发布</el-tag>
            <el-tag v-else type="warning">草稿</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="数据状态">
          <template slot-scope="{row}">
            <el-tag v-if="row.status === 1" type="success">可用</el-tag>
            <el-tag v-else type="danger">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="数据" width="180px">
          <template slot-scope="{row}">
            <el-button @click="tag(row.blogTagList)">标签</el-button>
            <el-button @click="comment(row.blogId)">评论</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" :width="type === 1 ?'180px':'270px'" fixed="right">
          <template slot-scope="{row}">
            <el-button v-if="type === 2" @click="edit(row.blogId)">修改</el-button>
            <el-button @click="del(row.blogId)">删除</el-button>
            <el-button @click="preview(row.blogId)">预览</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :current-page="pageInfo.page" :page-size="pageInfo.limit" :page-sizes="[5,10,20,50,100]" :total="pageInfo.total" layout="total,prev,pager,next,jumper,sizes" @current-change="currentChange" @size-change="sizeChange"/>
    </el-card>
    <el-dialog title="博客标签" :visible.sync="showTag" v-if="showTag">
      <el-card>
        <el-tag type="success" v-for="item in tagList" :key="item.tagId">{{item.tag.name}}</el-tag>
      </el-card>
    </el-dialog>
    <blog-comment-list ref="blogCommentListRef"/>
    <blog-preview ref="blogPreview"/>
  </div>
</template>

<style scoped lang="scss">

</style>
